<template>
  <div class="wapper notice_c" style="padding-top: 10px">
    <affix
      :label="$t('configLazyLoad.noticeConfig.systemNoticeSearch')"
      >
      <el-form label-position="top" label-width="80px" :model="noticeForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item :label="$t('workbench.noticeTitle')" class="padd-r-10">
              <el-input v-model.trim="noticeForm.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-form-item :label="$t('workbench.publishTime')" class="padd-r-10">
                <el-col :span="11" style="padding-left: 0px;padding-right: 0px">
                  <el-date-picker
                    v-model="noticeForm.publishTimeBegin"
                    type="datetime"
                    size="mini"
                    :editable="false"
                    :placeholder="$t('report.startTime')"
                    id="noticePublishStr"
                    style="width: 100%">
                  </el-date-picker>
                </el-col>
                <el-col class="bet" :span="2" style="padding-left: 6px">
                </el-col>
                <el-col :span="11" style="padding-right: 0px">
                  <el-date-picker
                    v-model="noticeForm.publishTimeEnd"
                    type="datetime"
                    size="mini"
                    id="noticePublishEnd"
                    :editable="false"
                    :placeholder="$t('report.endTime')"
                    style="width: 100%">
                  </el-date-picker>
                </el-col>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="6" class="cycle-time">
            <el-form-item :label="$t('configLazyLoad.noticeConfig.publishStatus')">
              <el-select v-model="noticeForm.status" :placeholder="$t('public.pleasePick')">
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="margin-t-10">
          <el-col :span="6">
            <el-form-item :label="$t('callServiceSkillGroup.callServiceSkillGroup4')" class="padd-r-10">
              <agent-select
                style="width: 100%"
                :placeholder = "$t('config.agent.pleaseParentAgent')"
                @agentChange = "agentChange"
                :customfield = "customize"
                ref = "agnetSelect"
              >
              </agent-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-form-item :label="$t('configLazyLoad.noticeConfig.lastOperationTime')" class="padd-r-10">
                <el-col :span="11" style="padding-left: 0px;padding-right: 0px">
                  <el-date-picker
                    v-model="noticeForm.updateTimeBegin"
                    type="datetime"
                    :editable="false"
                    size="mini"
                    id="noticeUpdateStar"
                    :placeholder="$t('report.startTime')"
                    style="width: 100%">
                  </el-date-picker>
                </el-col>
                <el-col class="bet" :span="2" style="padding-left: 6px">
                </el-col>
                <el-col :span="11" style="padding-right: 0px">
                  <el-date-picker
                    v-model="noticeForm.updateTimeEnd"
                    type="datetime"
                    :editable="false"
                    id="noticeUpdateEnd"
                    size="mini"
                    :placeholder="$t('report.endTime')"
                    style="width: 100%">
                  </el-date-picker>
                </el-col>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="6" class="cycle-time">
            <el-form-item :label="$t('configLazyLoad.noticeConfig.noticeLevel')">
              <el-select v-model="noticeForm.level" :placeholder="$t('public.pleasePick')">
                <el-option
                  v-for="item in levelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" style="text-align: right">
            <el-button class="primary_btn report_excel_btn" @click.stop="resetBtn">{{$t('public.reset')}}</el-button>
            <el-button type="primary" class="primary_btn" @click.stop="search">{{$t('public.search2')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </affix>
    <affix
      :label="$t('configLazyLoad.noticeConfig.systemNoticeSearchResult')"
      style="padding-right: 5px"
      >
      <configCompositionTwoWindowStyle
        :leftWidth = "15"
        :rightWidth="9"
      >
        <template slot="card">
          <noticeTab
            :tableData="tableData"
            :count="count"
            :currPage = "currPage"
            @trunPages="trunPages"
            @addNotice="addNotice"
            @del="del"
            @edit="edit"
            @showNotice="showNotice"
          >
          </noticeTab>
        </template>
        <template slot="detail">
          <div v-if="isShowAddOrEdit">
            <BreadCrumbConfig :titleArr="titleArr" @back="cancle"></BreadCrumbConfig>
            <addOrEditNotice
                           :noticeInfo="noticeInfo"
                           :isEdit="isEdit"
                           @refresh="refresh"
                           ></addOrEditNotice>
          </div>
          <div v-if="isShowEdit">
            <BreadCrumbConfig :titleArr="titleArr" @back="cancle"></BreadCrumbConfig>
            <agentTree
              ref="agentTree"
              class="agent-tree"
              :random="random"
              :readSeat="readSeat"
            ></agentTree>
          </div>
        </template>
      </configCompositionTwoWindowStyle>
    </affix>
  </div>
</template>
<script>
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import configCompositionTwoWindowStyle from '@/components/ui-modules/config/configCompositionTwoWindowStyle'
  import Affix from '@/components/ui-modules/affix/Affix'
  import AgentSelect from '@/components/public-modules/cache/AgentSelect'
  import noticeTab from './base/noticeTab'
  import addOrEditNotice from './base/addOrEditNotice'
  import agentTree from './base/agentTree'
  import {isHasMenu} from '@/utils/m7Utils'
  import { resetForm, trimObjEmptyValue, deepClone, getFormatDateTime } from '@/utils/m7Utils.js'
  export default {
    name: 'noticeConfig',
    data () {
      return {
        agentCheckedIds: [],
        isShowEdit: false,
        isShowAddOrEdit: false,
        isEdit: false,
        noticeInfo: {},
        statusList: [
          {label: this.$t('public.all'), value: ''},
          {label: this.$t('qualityCheck.saved'), value: 'save'},
          {label: this.$t('configLazyLoad.noticeConfig.published'), value: 'publish'},
          {label: this.$t('webchat.exportFailure'), value: 'disable'}
        ],
        levelList: [
          {label: this.$t('public.all'), value: ''},
          {label: this.$t('business.priority1'), value: 'common'},
          {label: this.$t('configLazyLoad.noticeConfig.important'), value: 'important'}
        ],
        customize: [],
        titleArr: [this.$t('configLazyLoad.noticeConfig.systemNoticeManage'), this.$t('configLazyLoad.noticeConfig.addSystemNotice')],
        noticeForm: {
          updateAgent: '',
          title: '',
          publishTimeBegin: '',
          publishTimeEnd: '',
          updateTimeBegin: '',
          updateTimeEnd: '',
          status: '',
          level: ''
        },
        tableData: [],
        currPage: 1,
        pageSize: 10,
        count: 0,
        random: 0,
        readSeat: {
          readers: [],
          showScope: {}
        }
      }
    },
    methods: {
      cancle () {
        this.isShowAddOrEdit = false
        this.isShowEdit = false
      },
      search () {
        this.isShowAddOrEdit = false
        this.isShowEdit = false
        this.currPage = 1
        this.searchBtn()
      },
      refresh () {
        this.isShowAddOrEdit = false
        this.isShowEdit = false
        this.currPage = 1
        this.searchBtn()
      },
      showNotice (val) {
        let _data = {
          _id: val._id
        }
        this.$store.dispatch('getReadSeatsById', _data).then(res => {
          if (res && res.success) {
            this.titleArr = [this.$t('configLazyLoad.noticeConfig.systemNoticeManage'), this.$t('configLazyLoad.noticeConfig.readAgent')]
            this.isEdit = false
            this.isShowEdit = true
            this.isShowAddOrEdit = false
            this.readSeat.readers = res.readers
            this.readSeat.showScope = res.showScope
            this.random = Math.random()
          }
        })
      },
      del (val) {
        let _data = {
          _id: val._id
        }
        this.$confirm(this.$t('configLazyLoad.noticeConfig.sureDeleteNotice'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteNotice', _data).then(res => {
            if (res && res.success) {
              this.$message.success(this.$t('message.deleteSucc'))
              this.isShowAddOrEdit = false
              this.isShowEdit = false
              this.currPage = 1
              this.searchBtn()
            } else {
              this.$message.error(this.$t('channel.deleteFailure'))
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
      edit (val) {
        let _data = {
          _id: val._id
        }
        this.$store.dispatch('getNoticeById', _data).then(res => {
          if (res && res.success) {
            this.titleArr = [this.$t('configLazyLoad.noticeConfig.systemNoticeManage'), this.$t('configLazyLoad.noticeConfig.modifySystemNotice')]
            this.isEdit = true
            this.isShowAddOrEdit = true
            this.isShowEdit = false
            this.noticeInfo = res.data
            console.log(this.noticeInfo)
          }
        })
      },
      addNotice () {
        this.titleArr = [this.$t('configLazyLoad.noticeConfig.systemNoticeManage'), this.$t('configLazyLoad.noticeConfig.addSystemNotice')]
        this.isEdit = false
        this.isShowAddOrEdit = true
        this.isShowEdit = false
      },
      trunPages (page) {
        this.currPage = page
        this.searchBtn()
      },
      resetBtn () {
        this.$refs.agnetSelect.value = ''
        resetForm(this.noticeForm)
      },
      searchBtn () {
        let data = {}
        data = deepClone(this.noticeForm)
        trimObjEmptyValue(data)
        data.publishTimeBegin && (data.publishTimeBegin = getFormatDateTime(data.publishTimeBegin))
        data.publishTimeEnd && (data.publishTimeEnd = getFormatDateTime(data.publishTimeEnd))
        data.updateTimeBegin && (data.updateTimeBegin = getFormatDateTime(data.updateTimeBegin))
        data.updateTimeEnd && (data.updateTimeEnd = getFormatDateTime(data.updateTimeEnd))
        if (data.publishTimeBegin && data.publishTimeEnd) {
          if (new Date(this.noticeForm.publishTimeBegin).getTime() > new Date(this.noticeForm.publishTimeEnd).getTime()) {
            this.$message.error(this.$t('configLazyLoad.noticeConfig.errorTip1'))
            return
          }
        }
        if (data.updateTimeBegin && data.updateTimeEnd) {
          if (new Date(this.noticeForm.updateTimeBegin).getTime() > new Date(this.noticeForm.updateTimeEnd).getTime()) {
            this.$message.error(this.$t('configLazyLoad.noticeConfig.errorTip2'))
            return
          }
        }
        data.limit = this.pageSize
        data.page = this.currPage
        this.$store.dispatch('queryNoticeList', data).then(resp => {
          if (resp && resp.success) {
            this.count = resp.count
            if (resp.count) {
              this.tableData = resp.list
            } else {
              this.tableData = []
            }
          }
        })
      },
      agentChange (val) {
        this.noticeForm.updateAgent = val
      }
    },
    components: {
      Affix,
      AgentSelect,
      noticeTab,
      configCompositionTwoWindowStyle,
      addOrEditNotice,
      BreadCrumbConfig,
      agentTree
    },
    beforeMount () {
      this.show_system_notice = isHasMenu('show_system_notice', this.$store.state.session.user)
      this.searchBtn()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .padd-r-10
    padding-right 10px
  .margin-t-10
    margin-top 10px
  .wapper
    padding 0px
    padding-right 10px
    padding-left 16px
    height calc(100vh - 95px)
    overflow-y auto
    font-size 12px
  .bet
    &:before
      content: ''
      display inline-block
      width 15px
      height 1px
      margin 3px 12px
      background $cf-gray5
      text-align center
  .table-wapper
    display flex
    height 100%
  .notice-table
    flex 7
  .notice-create__box
    flex 3
    border-left 1px solid #e7e7eb
    margin-left 16px
    padding-left 16px
  .wrapper .overScroll
     overflow-y hidden
</style>
